<template>
    <van-popup @click-overlay="handleClickOutside" :show="props.show" position="bottom" :style="{ height: '30%' }"
        :lazy-render="true" :close-on-popstate="true" @click="handleClickOutside" close-icon-position="top-left"
        :round="true" duration="0.3" verlay>
        <br />
        <span @click="goSetAvatar" style="margin-left: 170px;">拍照</span>
        <hr style="margin-top: 20px;" />
        <UploaderJS />
    </van-popup>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import UploaderJS from '../components/UploaderJS.vue';
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
    show: Boolean
})

const emits = defineEmits(['closePopup'])

const goSetAvatar = () => {
    router.push('/my/set/setAvatar')
}

const handleClickOutside = (event: MouseEvent) => {
    // 确保点击的是空白区域，而不是子组件内的元素
    if (event.target === event.currentTarget) {
        emits('closePopup') // 触发自定义事件，通知父组件关闭popup
    }
}
</script>
<style lang="scss" scoped></style>